<template>
  <div id="admin">
    <Aside></Aside>
    <div :class="!$store.state.isCollapse?'small':'big'"  style="transition: all .4s">
      <TopBar></TopBar>
      <div id="main">
        <transition appear name="slide-fade">
          <router-view></router-view>
        </transition>

      </div>

    </div>

  </div>

</template>

<script>
import TopBar from "../../components/content/TopBar";
import Aside from "../../components/content/Aside";
import {setCookie, delCookie} from "../../untils/untils"
export default {
  name: "Admin",
  components:{
    TopBar,Aside
  },


}
</script>

<style>
#admin{
  display: flex;
  justify-content: left;
}
@keyframes move1 {
  from{
    opacity: 0.8;
  }
  to{
    opacity: 0;
    transform: translate(100px,0);
  }
}
@keyframes move2 {
  from{
    opacity: 0;

  }
  to{
    opacity: 1;

  }
}
/*.fade-enter-active{*/
/*    animation:move2 .3s ease-in;*/
/*    transition-delay: 1s;*/
/*}*/
/*.fade-leave-active{*/
/*    animation:move1 .3s ease-in ;*/
/*}*/

.slide-fade-enter-active {
  transition: all .3s ease;
  transition-delay: .3s;
}
.slide-fade-leave-active {
  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
.small{
  float: left;
  width: 86%;
}
.big{
  float: left;
  width: 95%;
}
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  /* border-right: ; */
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  float: left;
  text-align: center;
  /*line-height: 160px;*/
}
main{
  width: 100%;
  height: 660px;
  /* overflow: auto; */
}
#main{
  box-sizing: border-box;
  padding: 15px;
}
body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
#header{
  background-color: #fff;
  border-bottom: 0.5px rgb(220,223,230) solid;

}
#aside{
  background-color: #fff;
}

#content{
  float: left;
}
</style>